<template>
    <div class="htmlcard-set">

        <el-dialog :modal="false" title="编辑" :visible.sync="dialogFormVisible" width="300px">

            <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                <el-form-item prop="title" label="标题" :rules="{
                    required: true, message: '标题不能为空', trigger: 'blur'
                }">
                    <el-input v-model="dynamicValidateForm.title" width="80%" placeholder="请输入标题"></el-input>
                </el-form-item>

                <el-form-item prop="content" label="内容">
                    <el-input placeholder="请输入内容" v-model="dynamicValidateForm.content" type="textarea" width="80%"
                        autosize></el-input>
                </el-form-item>

                <el-form-item v-for="(answers, index) in dynamicValidateForm.answers" :label="'节点' + (index + 1)"
                    :key="answers.kk" :prop="'answers.' + index + '.text'" :rules="{
                        required: true, message: '节点不能为空', trigger: 'blur'
                    }">

                    <el-input placeholder="请输入节点内容" v-model="answers.text" size="mini"></el-input><el-button
                        @click.prevent="removeDomain(answers)" type="danger" size="mini">删除</el-button>

                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('dynamicValidateForm')" size="mini">确定</el-button>
                    <el-button @click="addDomain" size="mini">新增节点</el-button>

                </el-form-item>
            </el-form>


        </el-dialog>

    </div>
</template>
  
<script>
// @ is an alias to /src
export default {
    name: 'HtmlCardSet',
    data() {
        return {

            dialogFormVisible: false,
            dynamicValidateForm: {
                title: "",
                content: "",
                answers: [
                    { id: "", text: "" },
                ]
            }

        };
    },
    mounted() {

    },
    methods: {

        setFormVisible(type) {
            this.dialogFormVisible = true
            this.dynamicValidateForm = type
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const valueToSend = this.dynamicValidateForm;
                    this.$emit('HtmlCardSet-event', valueToSend);
                    this.dialogFormVisible = false
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        removeDomain(item) {
            var index = this.dynamicValidateForm.answers.indexOf(item)
            if (index !== -1) {
                this.dynamicValidateForm.answers.splice(index, 1)
            }
            this.updateIndexesInArray(this.dynamicValidateForm.answers)
        },
        addDomain() {
            this.dynamicValidateForm.answers.push({
                id: this.dynamicValidateForm.answers.length + 1,
                text: '',
                kk: Date.now()
            });
        },
        //更新id的信息
        updateIndexesInArray(arr) {
            arr.forEach((item, index) => {
                item.id = index + 1;
            });
        }
    }

}
</script>
<style scoped>
.el-select .el-input {
    width: 130px;
}

::v-deep .el-dialog {
    margin-right: 0;
}
</style>